<template>
    <div>
        <div v-if="!hideBar" class="flex justify-between items-center px-2 py-1" :class="'bg-' + type + '/20'"
            @click="change">
            <div class="text-sm text-regular">{{ title }}</div>
            <component :is="expand ? DownOne : LeftOne" theme="filled" size="18" fill="#409EFF" />
        </div>
        <div class="collapse-card" :class="expand ? 'expand' : ''" :style="{ padding: hideBar ? '0 8px' : '8px' }">
            <slot></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { DownOne, LeftOne } from '@icon-park/vue-next';
import { ref } from 'vue';

defineProps({
    title: { type: String, default: "" },
    type: { type: String, default: "primary" },
    hideBar: { type: Boolean, default: false },
})

const expand = ref(true);
const change = () => expand.value = !expand.value
</script>

<style scoped>
.collapse-card {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
    transform: scaleY(0);
}

.collapse-card.expand {
    max-height: fit-content;
    transform: scaleY(1);
}
</style>